<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="header-content">
        <view class="header-info">
          <view class="greeting">
            <text class="greeting-text">早上好，商家</text>
            <view class="merchant-badge">
              <text class="badge-icon fas fa-building text-xs mr-1"></text>
              <text class="badge-text">企业商家</text>
            </view>
          </view>
          <text class="header-title">商家服务中心</text>
          <!-- 等级信息 -->
          <view class="merchant-stats">
            <text class="stats-item">佣金率: <text class="stats-value">6%</text></text>
            <text class="stats-item">保证金: <text class="stats-value">￥5,000</text></text>
            <button class="info-button" @click="showMerchantLevelInfo">
              <text class="info-icon fas fa-info-circle"></text>
            </button>
          </view>
        </view>
        <view class="header-actions">
          <button class="action-button" @click="openNotifications">
            <text class="action-icon fas fa-bell text-xl"></text>
            <view class="notification-dot"></view>
          </button>
          <button class="action-button" @click="openCustomerService">
            <text class="action-icon fas fa-headset text-xl"></text>
          </button>
        </view>
      </view>
      
      <!-- Quick Stats -->
      <view class="quick-stats">
        <view class="stats-grid">
          <view class="stats-item-card">
            <view class="stats-card-info">
              <text class="stats-card-number">12</text>
              <text class="stats-card-label">待发货</text>
            </view>
          </view>
          <view class="stats-item-card">
            <view class="stats-card-info">
              <text class="stats-card-number">3</text>
              <text class="stats-card-label">待处理</text>
            </view>
          </view>
          <view class="stats-item-card">
            <view class="stats-card-info">
              <text class="stats-card-number">98.5%</text>
              <text class="stats-card-label">好评率</text>
            </view>
          </view>
          <view class="stats-item-card">
            <view class="stats-card-info">
              <text class="stats-card-number">4.9</text>
              <text class="stats-card-label">店铺评分</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Main Content Scrollable -->
    <scroll-view class="main-content" scroll-y="true">
      <!-- Today Overview -->
      <view class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">今日概览</text>
          </view>
        </view>
        <view class="overview-grid">
          <view class="overview-card blue-card">
            <view class="card-header">
              <text class="card-icon money-icon fas fa-money-bill-wave text-3xl"></text>
              <view class="growth-tag">
                <text class="growth-icon fas fa-arrow-up mr-1"></text>
                <text class="growth-value">12.5%</text>
              </view>
            </view>
            <text class="card-number">¥28,586</text>
            <text class="card-label">今日销售额</text>
          </view>
          
          <view class="overview-card green-card">
            <view class="card-header">
              <text class="card-icon order-icon fas fa-shopping-bag text-3xl"></text>
              <view class="growth-tag">
                <text class="growth-icon fas fa-arrow-up mr-1"></text>
                <text class="growth-value">8.3%</text>
              </view>
            </view>
            <text class="card-number">186</text>
            <text class="card-label">今日订单</text>
          </view>
          
          <view class="overview-card purple-card">
            <view class="card-header">
              <text class="card-icon visitor-icon fas fa-users text-3xl"></text>
              <view class="growth-tag">
                <text class="growth-icon fas fa-arrow-up mr-1"></text>
                <text class="growth-value">15.6%</text>
              </view>
            </view>
            <text class="card-number">1,258</text>
            <text class="card-label">访客数</text>
          </view>
          
          <view class="overview-card orange-card">
            <view class="card-header">
              <text class="card-icon conversion-icon fas fa-percentage text-3xl"></text>
              <view class="growth-tag">
                <text class="growth-icon fas fa-arrow-up mr-1"></text>
                <text class="growth-value">2.1%</text>
              </view>
            </view>
            <text class="card-number">14.8%</text>
            <text class="card-label">转化率</text>
          </view>
        </view>
      </view>

      <!-- Quick Actions -->
      <view class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">快捷功能</text>
          </view>
        </view>
        <view class="quick-actions-grid">
          <navigator url="/pages/goods/list/list" class="action-item">
            <view class="action-icon-container blue-icon">
              <text class="action-icon fas fa-box text-xl"></text>
              <view class="badge">3</view>
            </view>
            <text class="action-label">商品管理</text>
          </navigator>
          <navigator url="/pages/order/list/list" class="action-item">
            <view class="action-icon-container green-icon">
              <text class="action-icon fas fa-clipboard-list text-xl"></text>
              <view class="badge">12</view>
            </view>
            <text class="action-label">订单处理</text>
          </navigator>
          <navigator url="/pages/marketing/list/list" class="action-item">
            <view class="action-icon-container orange-icon">
              <text class="action-icon fas fa-bullhorn text-xl"></text>
            </view>
            <text class="action-label">营销推广</text>
          </navigator>
          <navigator url="/pages/finance/list/list" class="action-item">
            <view class="action-icon-container pink-icon">
              <text class="action-icon fas fa-wallet text-xl"></text>
            </view>
            <text class="action-label">财务中心</text>
          </navigator>
        </view>
      </view>

      <!-- Pending Tasks -->
      <view class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar orange-bar"></view>
            <text class="title-text">待办事项</text>
          </view>
          <view class="view-all-button" @click="viewAllTodos">
            <text class="view-all-text">查看全部</text>
            <text class="view-all-icon fas fa-chevron-right text-xs"></text>
          </view>
        </view>
        <view class="pending-tasks">
          <view class="task-item orange-task">
            <view class="task-icon-container">
              <text class="task-icon fas fa-truck"></text>
            </view>
            <view class="task-content">
              <text class="task-title">待发货订单</text>
              <text class="task-desc">您有12笔订单待发货</text>
            </view>
            <button class="task-action" @click="handlePendingOrders">立即处理</button>
          </view>
          
          <view class="task-item blue-task">
            <view class="task-icon-container">
              <text class="task-icon fas fa-reply"></text>
            </view>
            <view class="task-content">
              <text class="task-title">售后申请</text>
              <text class="task-desc">3个售后申请待处理</text>
            </view>
            <button class="task-action" @click="handleAfterSales">立即处理</button>
          </view>
          
          <view class="task-item purple-task">
            <view class="task-icon-container">
              <text class="task-icon fas fa-exclamation-circle"></text>
            </view>
            <view class="task-content">
              <text class="task-title">库存预警</text>
              <text class="task-desc">5个商品库存不足</text>
            </view>
            <button class="task-action" @click="handleInventoryWarning">立即补货</button>
          </view>
        </view>
      </view>

      <!-- Platform Announcements -->
      <view class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar"></view>
            <text class="title-text">平台公告</text>
          </view>
          <view class="view-all-button" @click="viewMoreAnnouncements">
            <text class="view-all-text">更多</text>
            <text class="view-all-icon fas fa-chevron-right text-xs"></text>
          </view>
        </view>
        <view class="announcement-card" @click="viewAnnouncementDetail('202501050001')">
          <view class="announcement-content">
            <view class="new-tag">新</view>
            <view class="announcement-info">
              <text class="announcement-title">双11大促报名开启</text>
              <text class="announcement-desc">2025年双11购物节商家报名通道已开放，享受流量扶持...</text>
              <text class="announcement-time">2025-01-05 10:30</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- Bottom Navigation: now provided globally by tabBar -->
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    showMerchantLevelInfo() {
      uni.showModal({
        title: '商家等级信息',
        content: '当前等级：企业商家\n佣金率：6%\n保证金：￥5,000\n交易限制：无限制\n\n特权服务：\n• 完整功能访问权限\n• 7×24小时客服支持\n• 专业运营指导\n• 数据分析工具\n\n升级条件：\n• 满足品牌授权要求\n• 提供商标注册证\n• 缴纳￥20,000保证金',
        showCancel: false
      })
    },
    
    openNotifications() {
      uni.navigateTo({
        url: '/pages/notifications/notifications'
      })
    },
    
    openCustomerService() {
      uni.navigateTo({
        url: '/pages/customer-service/customer-service'
      })
    },
    
    handlePendingOrders() {
      uni.navigateTo({
        url: '/pages/order/list/list'
      })
    },
    
    handleAfterSales() {
      uni.navigateTo({
        url: '/pages/order/list/list?filter=service'
      })
    },
    
    handleInventoryWarning() {
      uni.navigateTo({
        url: '/pages/inventory/list/list'
      })
    },
    
    viewAllTodos() {
      uni.navigateTo({
        url: '/pages/order/list/list'
      })
    },
    
    viewMoreAnnouncements() {
      uni.navigateTo({
        url: '/pages/announcements/list/list'
      })
    },
    
    viewAnnouncementDetail(announcementId) {
      uni.navigateTo({
        url: `/pages/announcements/detail/detail?id=${announcementId}`
      })
    }
  }
}
</script>

<style>

.container {
  background-color: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.header {
  background: linear-gradient(to right, #4f46e5, #9333ea);
  padding: 32rpx;
  color: white;
  position: relative;
  z-index: 50;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-info {
  flex: 1;
}

.greeting {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.greeting-text {
  font-size: 24rpx;
  opacity: 0.8;
  margin-right: 20rpx;
}

.merchant-badge {
  background-color: #3b82f6;
  padding: 8rpx 16rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
}

.badge-icon {
  font-size: 20rpx;
  margin-right: 5rpx;
}

.badge-text {
  font-size: 20rpx;
  font-weight: bold;
}

.header-title {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 0;
}

.merchant-stats {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  opacity: 0.9;
}

.stats-item {
  margin-right: 25rpx;
}

.stats-value {
  font-weight: bold;
}

.info-button {
  background: none;
  border: none;
  margin: 0;
  color: #fde047;
}

.info-icon {
  font-size: 24rpx;
}

.header-actions {
  display: flex;
  align-items: flex-start;
  gap: 30rpx;
}

.action-button {
  background: none;
  border: none;
  padding: 0;
  position: relative;
}

.action-icon {
  font-size: 40rpx;
}

.notification-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 12rpx;
  height: 12rpx;
  background-color: #f44336;
  border-radius: 50%;
}

.quick-stats {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 25rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15rpx;
}

.stats-item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stats-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stats-card-number {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 0;
  color: white;
}

.stats-card-label {
  font-size: 24rpx;
  opacity: 0.8;
  color: white;
}

.main-content {
  flex: 1;
  padding-bottom: 80rpx;
}

.section {
  padding: 30rpx;
}

.section-header {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  width: 100%;
  min-height: 40rpx;
}

.section-title {
  display: flex;
  align-items: center;
}

.title-bar {
  width: 8rpx;
  height: 32rpx;
  background-color: #4f46e5;
  border-radius: 4rpx;
  margin-right: 15rpx;
}

.orange-bar {
  background-color: #ea580c;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.view-all-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 10rpx;
}

.view-all-text {
  font-size: 24rpx;
  color: #5c6bc0;
  margin-right: 10rpx;
}

.view-all-icon {
  font-size: 20rpx;
  color: #5c6bc0;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.overview-card {
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.blue-card {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 2rpx solid #dbeafe;
}

.green-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 2rpx solid #bbf7d0;
}

.purple-card {
  background: linear-gradient(135deg, #fdf4ff, #f3e8ff);
  border: 2rpx solid #e9d5ff;
}

.orange-card {
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
  border: 2rpx solid #fed7aa;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.card-icon {
  font-size: 48rpx;
}

.money-icon {
  color: #2563eb;
}

.order-icon {
  color: #16a34a;
}

.visitor-icon {
  color: #9333ea;
}

.conversion-icon {
  color: #ea580c;
}

.growth-tag {
  background-color: #e8f5e9;
  border-radius: 50rpx;
  padding: 5rpx 15rpx;
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #4caf50;
}

.growth-icon {
  font-size: 20rpx;
  margin-right: 5rpx;
}

.card-number {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.card-label {
  font-size: 24rpx;
  color: #666;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.action-item {
  text-align: center;
}

.action-icon-container {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15rpx;
  position: relative;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.blue-icon {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.green-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.orange-icon {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.pink-icon {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.action-icon {
  color: white;
  font-size: 40rpx;
}

.badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #f44336;
  color: white;
  font-size: 20rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-label {
  font-size: 24rpx;
  color: #333;
}

.pending-tasks {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.task-item {
  background-color: white;
  border-radius: 15rpx;
  padding: 25rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 2rpx solid;
}

.orange-task {
  border-color: #fed7aa;
  background-color: #fff7ed;
}

.blue-task {
  border-color: #dbeafe;
  background-color: #eff6ff;
}

.purple-task {
  border-color: #e9d5ff;
  background-color: #fdf4ff;
}

.task-icon-container {
  width: 80rpx;
  height: 80rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.orange-task .task-icon-container {
  background-color: #ff9800;
}

.blue-task .task-icon-container {
  background-color: #2196f3;
}

.purple-task .task-icon-container {
  background-color: #9c27b0;
}

.task-icon {
  color: white;
  font-size: 36rpx;
}

.task-content {
  flex: 1;
}

.task-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.task-desc {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.task-action {
  background-color: #5c6bc0;
  color: white;
  border: none;
  border-radius: 10rpx;
  padding: 15rpx 20rpx;
  font-size: 24rpx;
}

.announcement-card {
  background: linear-gradient(to right, #eef2ff, #fdf4ff);
  border-radius: 24rpx;
  padding: 32rpx;
  border: 2rpx solid #e0e7ff;
}

.announcement-content {
  display: flex;
  align-items: flex-start;
}

.new-tag {
  background-color: #f44336;
  color: white;
  font-size: 20rpx;
  padding: 5rpx 15rpx;
  border-radius: 50rpx;
  margin-right: 20rpx;
}

.announcement-info {
  flex: 1;
}

.announcement-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.announcement-desc {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
  line-height: 1.4;
}

.announcement-time {
  display: block;
  font-size: 20rpx;
  color: #999;
}

/* bottom navigation is handled globally by tabBar */
</style>